<template>
    <div style="width: 100%;height: 100%;">
        <div id="china-map" style="width: 100%;height: 100%;"></div>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
// import JSON from '../../mapJson/anhui.json';
import JSON from '../../mapJson/china.json';
export default {
    data() {
        return {
            mapOption: {}
        }
    },
    mounted() {
        this.initMap()
        this.drawMap()
    },
    methods: {
        drawMap() {
            echarts.registerMap('china', JSON, {});
            const myChart = echarts.init(
                document.getElementById('china-map'),
            );
            myChart.setOption(this.mapOption);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        },
        initMap() {
            this.mapOption = {
                tooltip: {
                    trigger: 'item',
                    renderMode: 'html',
                    triggerOn: 'click', // 触发方式
                    enterable: true,
                    backgroundColor: '#fff',
                    padding: 0,
                    textStyle: {
                        color: '#000',
                        fontSize: '12'
                    },
                    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
                },
                dispatchAction: {
                    type: 'downplay'
                },
                layoutCenter: ['50%', '50%'],
                layoutSize: '100%',
                // visualMap: {
                //     // 配置visualMap组件
                //     type: 'piecewise',  // 按分段显示
                //     pieces: [
                //         { value: '安徽', label: '安徽', color: 'red' },  // 将指定省份的边界标记为红色
                //     ],
                //     outOfRange: { color: 'gray' }  // 非指定省份的颜色
                // },
                geo: {
                    map: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#397e82',
                            borderColor: '#fff',
                            shadowColor: '#397e82',
                            borderWidth: 1,
                            shadowOffsetX: 6,
                            shadowOffsetY: 8,
                            opacity: 0.5
                        },
                        emphasis: {
                            borderWidth: 0.5,
                            borderColor: '#fff',
                            areaColor: '#397e82'
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                        }
                    },
                    regions: [{
                        name: '南海诸岛',
                        itemStyle: {
                            areaColor: '#fff',
                            borderColor: '#fff',
                            normal: {
                                opacity: 0,
                                label: {
                                    show: false,
                                    color: '#fff'
                                }
                            }
                        },
                        label: {
                            show: false,
                            color: '#FFFFFF',
                            fontSize: 12
                        }
                    }]
                },
                series: [
                    {
                        name: '线1',
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 6,
                            trailLength: 0,
                            symbolSize: 4
                        },
                        lineStyle: {
                            normal: {
                                type: 'solid',
                                color: '#84ec9b',
                                width: 5,
                                opacity: 1,
                                curveness: 0.1
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        data: [{
                            fromName: '长沙',
                            toName: '南宁',
                            coords: [
                                [111.5332, 27.3779],
                                [108.2813, 23.6426]
                            ]
                        }]
                    },
                    {
                        name: '线2',
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 6,
                            trailLength: 0,
                            symbolSize: 4
                        },
                        lineStyle: {
                            normal: {
                                type: 'solid',
                                color: '#cc9e54',
                                width: 5,
                                opacity: 1,
                                curveness: 0.1
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        data: [{
                            fromName: '长沙',
                            toName: '南宁',
                            coords: [
                                [114.5332, 27.3779],
                                [114.2813, 23.6426]
                            ]
                        }]
                    },
                    {
                        name: '点1',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        symbolSize: 4,
                        zlevel: 2,
                        rippleEffect: {
                            color: 'transparent'
                        },
                        symbol: 'circle',
                        itemStyle: {
                            color: '#fff',
                            borderWidth: 8,
                            borderColor: '#6a0000'
                        },
                        data: [{
                            name: '长沙',
                            value: [111.5332, 27.3779]
                        }]
                    },
                    {
                        name: '点2',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        symbolSize: 4,
                        zlevel: 2,
                        rippleEffect: {
                            color: 'transparent'
                        },

                        symbol: 'circle',
                        itemStyle: {
                            color: '#fff',
                            borderWidth: 8,
                            borderColor: '#cc9e54'
                        },
                        data: [{
                            name: '西藏',
                            value: [114.5332, 27.3779]
                        }]
                    },
                    {
                        type: 'lines',
                        zlevel: 1,
                        effect: {
                            show: true,
                            period: 6,
                            trailLength: 0.7,
                            color: '#fff',
                            symbolSize: 3
                        },
                        lineStyle: {
                            normal: {
                                color: 'source',
                                width: 0,
                                curveness: 0.2
                            }
                        },
                        data: [
                            {
                                fromName: '出发地',
                                toName: '目的地',
                                coords: [[111.5332, 27.3779], [101.5332, 37.3779]]
                            },
                            {
                                fromName: '出发地',
                                toName: '目的地',
                                coords: [[111.5332, 27.3779], [115.5332, 39.3779]]
                            }
                        ]
                    },
                    {
                        type: 'map',
                        map: 'china',
                        label: {
                            normal: {
                                show: true, // 显示省份标签
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14
                                }
                            },
                            emphasis: {
                                // 对应的鼠标悬浮效果
                                show: true,
                                // 选中后的字体样式
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 0.8,
                                borderColor: '#8afcdf',
                                areaColor: {
                                    type: 'linear-gradient',
                                    x: 0,
                                    y: 900,
                                    x2: 300,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0.5,
                                            color: 'rgba(57,126,130,0.4)' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(57,126,130,0.2)' // 100% 处的颜色B3F6F0
                                        }
                                    ],
                                    global: true // 缺省为 false
                                }
                            },
                            emphasis: {
                                areaColor: 'rgba(57,126,130,0.5)'
                            }
                        },
                        data: [{
                            name: '湖北',
                            itemStyle: {
                                areaColor: '#cc9e54'
                            }
                        }, {
                            name: '云南',
                            itemStyle: {
                                areaColor: '#cd4b6b'
                            }
                        }, {
                            name: '福建',
                            itemStyle: {
                                areaColor: '#d0d148'
                            }
                        }]
                    }
                ]
            }
        }
    }
}
</script>
  
<style></style>
  